<%@ page language="java" contentType="text/html" pageEncoding="utf-8"%>
<%@ include file="header.jsp" %>
<title>注册会员 - 红高粱</title>
<style type="text/css">
body{ background-image:url("../m/images/c_shop_bg2.png"); max-width:640px;background-color:#000;}
*{margin:0; padding:0;}
ul li{ list-style:none;}
.login{width:80.4444%; margin:0 auto; padding:10.29% 0 0 0; line-height:0; margin-top:20px}
.head{ width:100%}
.logo {width:80%;margin:0 auto; margin-bottom:20px;overflow:hidden;}
.logo img{ width:100%;text-align:center;}
.middle{background-repeat:repeat-y;width:100%; background-size:contain;}
.login .center{ width:85.4838%;margin:0 auto;}
.middle .center{width:98%;text-align:center;margin:0 auto;overflow:hidden;color:#6c5c6ca;background-size:cover;width:100%; }
.login .center img{float:left;margin-left:20px;}
.usename {margin-bottom:8px; padding:8px 0px;overflow:hidden;background:url('../m/images/user_textfield_bg.png') no-repeat;opacity:1.5; }
.usename img{ height:30px;vertical-align:bottom;}
#phone {border:none;}
.center input{width:80%;background-color:#2b2e31; border:1px solid #2b2e31; border-radius:0.4em; line-height:1.6em; font-family:"黑体";color:#939393; font-size:1em; padding:0 0 0 5px;margin-top:5px; box-shadow: 10px 10px 5px #888888 inset;float:left;}
.usephone{margin-bottom:8px; padding:6px 0px; height:auto;overflow:hidden; background:url('../m/images/user_textfield_bg.png') no-repeat;opacity:2;}
.usephone img{ width:22px;vertical-align:bottom;}
.usephone .right_{width:80%;float:left;overflow:hidden;padding-left:4px;}
.usephone select{width:80%;background-color:#2b2e31; border:1px solid #2b2e31;color:#fff;line-height:1em;font-size:1em;float:left; }
.birthday{height:1.6em;padding-left:4px;}
.birthday select{width:30%;background-color:#2b2e31; border:1px solid #2b2e31;color:#fff; text-align:center;line-height:1.6em;font-size:0.8em; float:left; }
.birthday{color:#fff; float:left; width:80%;}
.birthday .left_{float:left;overflow:hidden;height:1.6em;width:2em;line-height: 1.4em; }
.mm_sure { padding:8px 0px;overflow:hidden; background:url('../m/images/user_textfield_bg.png') no-repeat;opacity:2;}
.mm_sure img{ height:auto;vertical-align:bottom;width:22px;}
.login .center .border{background-position:bottom;}
.attention{margin:0 10px 0 0px;width:100%; overflow:hidden; text-align:right;}
.attention p{ font-size:0.9em;color:#939393;font-family:"黑体"; line-height:32px; text-align:left;}
.attention .check{ width:32.5%; float:left; font-size:0.84em; color:#939393;font-family:"黑体"; line-height:32px; margin:0 2px 0 0;}
.attention .check input{ margin:0 0px 0 0; width:15px; height:15px; padding:0 ; border:1px solid #c6c2c2; background-color:#fff;}
.submit{overflow:hidden;width:98%;margin:0 auto;margin-bottom:20px; margin-top:20px; }
.txt{text-align: center;color:#c5c6ca;font-size:18px; font-weight: bold;}
.login input{box-shadow:none!important;-webkit-box-shadow:none!important;border: 0px solid #2b2e31!important;-webkit-appearance: none;}
</style> 
<script type="text/javascript">
$(document).ready(function(){
	 $("input").focus(function(){
		 $("html,body").animate({scrollTop:$(".center").offset().top-40}, 1000);
	});
	
	 
});

</script> 
</head>
<body>
	<div class="login">
    	
        <div class="middle">
        	<div class="logo"><img src="../m/images/logo.png" width="100%"></div>
        	<div class="center">
        		<div class="usename ">
        			<img src="../m/images/login_p.png" ><input id="phone" type="text" placeholder="手机号码" style="background-color:transparent;border:none;color:#fff;">
       			</div>
                <div class="usephone border	">
               		<img src="../m/images/login_mm.png" ><input id="password" placeholder="密码"  type="password" style="background-color:transparent;border:none;color:#fff;"/>
               	</div>
               	<div class="mm_sure border">
               		<img src="../m/images/mm_sure.png" ><input id="sure" placeholder="确认密码"  type="password" style="background-color:transparent;border:none;color:#fff;"/>
               	</div>
               	<div class="usephone border" style="display:none;">
               		<img src="../m/images/sex.png" >
               		<div class="right_">
               			<select id="gender" name="gender">
	               			<option value ="1" >我是帅哥</option>
	      					<option value ="0" >我是靓妹</option>
 						</select>
					<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
					</div>
               	</div>
               	<div class="mm_sure "  style="display:none;">
               		<img src="../m/images/age.png" >
               		<div class="birthday">
               		<select id="birthday_m">
	               			<option value ="1" >1</option>
	      					<option value ="2" >2</option>
	      					<option value ="3" >3</option>
	      					<option value ="4" >4</option>
	      					<option value ="5" >5</option>
	      					<option value ="6" >6</option>
	      					<option value ="7" >7</option>
	      					<option value ="8" >8</option>
	      					<option value ="9" >9</option>
	      					<option value ="10" >10</option>
	      					<option value ="11" >11</option>
	      					<option value ="12" >12</option>
 						</select> 
 					<div class="left_">月</div>
 					<select id="birthday_d">
	               			<option value ="1" >1</option>
	      					<option value ="2" >2</option>
	      					<option value ="3" >3</option>
	      					<option value ="4" >4</option>
	      					<option value ="5" >5</option>
	      					<option value ="6" >6</option>
	      					<option value ="7" >7</option>
	      					<option value ="8" >8</option>
	      					<option value ="9" >9</option>
	      					<option value ="10" >10</option>
	      					<option value ="11" >11</option>
	      					<option value ="12" >12</option>
	      					<option value ="13" >13</option>
	      					<option value ="14" >14</option>
	      					<option value ="15" >15</option>
	      					<option value ="16" >16</option>
	      					<option value ="17" >17</option>
	      					<option value ="18" >18</option>
	      					<option value ="19" >19</option>
	      					<option value ="20" >20</option>
	      					<option value ="21" >21</option>
	      					<option value ="22" >22</option>
	      					<option value ="23" >23</option>
	      					<option value ="24" >24</option>
	      					<option value ="25" >25</option>
	      					<option value ="26" >26</option>
	      					<option value ="27" >27</option>
	      					<option value ="28" >28</option>
	      					<option value ="29" >29</option>
	      					<option value ="30" >30</option>
	      					<option value ="31" >31</option>
 						</select> 
 						<div class="left_">日</div>
 					</div>
               	</div>
        	</div>
       	 <div class="submit">
               <a href="javascript:register();"><img src="../m/images/reg.png" width="100%"></a>
          </div>
        </div>
        
        <script type="text/javascript">
        	function register(){
        		var myreg = new RegExp('^((13[0-9])|(15[0-9])|(18[0-9]))\\d{8}$');
        		var phone = $("#phone").val();
        		var password = $("#password").val();
        		var surePwd = $("#sure").val();
        		var src = location.search;
        		var openId = src.substring(1, src.length)+"";
        		var gender = $("#gender").val();
        		var m = $("#birthday_m").val();
        		var d = $("#birthday_d").val();
        		var birthday = m+"_"+d;
        		$("#birthday").val(birthday);
        		if(phone.length <=0 )
        		{
        			alert("手机号码不能为空");
        			return;
        		}
        		else if(!myreg.test(phone)){
        			alert("手机号码不正确");
        			return;
        		}
        		else if(password.length <=0){
        			alert("密码不能为空");
        			return;
        		}
        		else if(password.length < 6){
        			alert("密码至少6位");
        			return;
        		}
        		else if(password != surePwd){
        			alert("两次密码输入不一致");
        			return;
        		}
        		
        		$.ajax({
        			url:"register",
        			type:"POST",
        			data:{phone:phone,password:password,customerId:${customerId},gender:gender,birthday:birthday},
        			dataType:"json",
        			success:function(data){
        				if(data.ok){
        					alert(data.msg);
        					location.href="login?cid=${loginId}";
        				}else{
        					alert(data.msg);
        					location.reload(true);
        				}
        			}
        		});
        	}
        </script>
    </div>
</body>
<%@ include file="footer.jsp" %>
</html>